<template>
	<el-date-picker
		:disabled="!activate"
		:placeholder="FieldItem?.TipsText"
		:start-placeholder="placeholder.start"
		:end-placeholder="placeholder.start"
		v-model="componentVal"
		:value-format="valFormat"
		:style="{ width: width }"
		:type="type"
	>
	</el-date-picker>
</template>
<script lang="ts" setup>
import { TabFieldType, TablePageType } from '../custom/DataStructs/commontype';
import useElement from './hooks/useElement';
import { useVModel } from '@vueuse/core';
const props = withDefaults(
	defineProps<{
		pageInfo?: TablePageType;
		filterIdx: number;
		located: string;
		inputData: Record<string, any>;
		globalData?: any;
		modelValue: string | string[];
		FieldItem: TabFieldType | null;
	}>(),
	{
		located: 'table',
		filterIdx: -1,
		pageData: {},
		globalData: null,
		modelValue: '',
		FieldItem: null,
	}
);
const { located, FieldItem } = toRefs(props);
const emit = defineEmits(['update:modelValue']);
const state = reactive<{
	activate: boolean;
	type: string;
	valFormat: string;
	attrs: Record<string, any>;
	placeholder: {
		start: string;
		end: string;
	};
}>({
	activate: true,
	type: 'date',
	valFormat: 'YYYYMMDD',
	attrs: {},
	placeholder: {
		start: '开始时间',
		end: '结束时间',
	},
});
const { activate, type, valFormat, placeholder } = toRefs(state);
const width = ref();

// 绑定值发生变化时更改
const componentVal = useVModel(props, 'modelValue', emit);

const changeTypeAndValFormat = () => {
	if (FieldItem.value?.pageType === 'page') {
		if (FieldItem.value.InputType === 'el-date') {
			type.value = 'date';
			valFormat.value = 'YYYYMMDD';
		} else if (FieldItem.value!.InputType === 'el-date-range') {
			type.value = 'datetimerange';
			valFormat.value = 'YYYYMMDDHHmmss';
		}
	} else {
		if (['el-date'].includes(FieldItem.value!.InputType) && FieldItem.value!.InputDefine?.filterType === 'range' && located?.value == 'Filter') {
			type.value = 'daterange';
			valFormat.value = 'YYYYMMDD';
			placeholder.value = {
				start: '开始日期',
				end: '开始日期',
			};
		} else if (['el-date'].includes(FieldItem.value!.InputType)) {
			type.value = 'date';
			valFormat.value = 'YYYYMMDD';
		} else if (
			(FieldItem.value!.InputType === 'el-time' && FieldItem.value!.InputDefine.filterType === 'exact') ||
			FieldItem.value!.InputType === 'systime'
		) {
			type.value = 'datetime';
			valFormat.value = 'YYYYMMDDHHmmss';
		} else if (FieldItem.value!.InputType === 'el-time' && FieldItem.value!.InputDefine?.filterType === 'range') {
			type.value = 'datetimerange';
			valFormat.value = 'YYYYMMDDHHmmss';
		}
	}
};
changeTypeAndValFormat();
const { handleStyle, handleDisable } = useElement(located, FieldItem.value!, componentVal, props);
if (FieldItem.value?.pageType && FieldItem.value.pageType === 'page') {
	activate.value = !FieldItem.value.attrs.disabled;
	width.value = '100%';
} else {
	handleDisable(activate);
	width.value = handleStyle();
}
</script>
<style lang="scss" scoped></style>
